<script setup>
import { ref, onMounted } from 'vue'
import { wechatLogin } from '@/utils/auth'

const loading = ref(false)
const errorMessage = ref('')

const handleWechatLogin = async () => {
  loading.value = true
  errorMessage.value = ''
  
  try {
    await wechatLogin()
    uni.switchTab({
      url: '/pages/index/index'
    })
  } catch (error) {
    errorMessage.value = error.message || '登录失败，请重试'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  // 监听token过期事件
  uni.$on('tokenExpired', () => {
    errorMessage.value = '登录已过期，请重新登录'
  })
})
</script>

<template>
  <view class="login-container">
    <view class="login-header">
      <text class="title">欢迎使用</text>
      <text class="subtitle">请登录以继续使用</text>
    </view>
    
    <view class="login-content">
      <button 
        class="wechat-login-btn" 
        :disabled="loading"
        @click="handleWechatLogin"
      >
        <image 
          src="/static/images/wechat-logo.png" 
          class="wechat-logo" 
          v-if="!loading"
        />
        <text v-if="loading">登录中...</text>
        <text v-else>微信一键登录</text>
      </button>
      
      <text class="error-message" v-if="errorMessage">{{ errorMessage }}</text>
    </view>
  </view>
</template>

<style scoped>
.login-container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.login-header {
  text-align: center;
  margin-bottom: 80rpx;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: #999;
}

.wechat-login-btn {
  background-color: #07C160;
  color: white;
  border-radius: 8rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 32rpx;
}

.wechat-logo {
  width: 48rpx;
  height: 48rpx;
  margin-right: 16rpx;
}

.error-message {
  color: #ff4d4f;
  font-size: 28rpx;
  margin-top: 32rpx;
  text-align: center;
}
</style>